<template>
    <div class="page-search">
        <hy-form v-bind="searchFormConfig" v-model='formData'>
                <template #header>
                    <h1>高级检索</h1>
                </template>
                <template #footer>
                <div class="handle-btns">
                    <el-button @click="handleRestClick">重置</el-button>
                    <el-button type="primary" @click="handleQueryClick">搜索</el-button>
                </div>
                </template>
            </hy-form>
    </div>
</template>

<script>
import HyForm from '@/base-ui/form'
import {ref} from 'vue'
export default {
    props:{
      searchFormConfig:{
          type:Object,
          required:true
      }
    },
    components:{
        HyForm
    },
    emits:['resetBtnClick','queryBtnClick'],
    setup (props,{emit}) {
        // formData中的属性应该动态来决定
        const formItems=props.searchFormConfig?.formITems ?? []
        const formOriginData={}
        for(const item of formItems){
          formOriginData[item.field]=''
        }
        // 输入的值
   const formData=ref(formOriginData)
 

// 用户重置
   const handleRestClick =()=>{
      formData.value=formOriginData
      emit('resetBtnClick')
   }

  //  点击搜索
  const handleQueryClick=()=>{
    // 表单输入的东西
    // console.log(formData.value);
    emit('queryBtnClick',formData.value)
  }
        return {
            formData,
            handleRestClick,
            handleQueryClick
        }
    }
}
</script>

<style lang="less" scoped>
.page-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.user-search-item {
  padding: 10px 30px;
  display: flex;
  align-items: center;
}
.handle-btns {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>